<template>
  <view class="normal-login-container">

    <view class="item-wrap" style="margin-bottom: 0">
      <view class="lineBottom10">
        <uni-section title="更换轮胎信息" type="line" />
      </view>

      <view style="margin: 8rpx 20rpx 8rpx 20rpx">
        <uni-forms ref="ruleForm" :rules="rules" :label-position="boole ? 'top' : 'left'" :model="ruleForm"
          labelWidth="auto">
          <uni-forms-item label="预计更换轮胎开始时间:" name="expectStartTime" :required="boole">
            <text class="expectStartTime" />
            <uni-datetime-picker v-if="boole" type="date" placeholder="请选择预计更换轮胎开始时间" return-type="string"
              v-model="ruleForm.expectStartTime" />
            <text v-else> {{ ruleForm.expectStartTime || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="预计更换轮胎结束时间:" name="expectEndTime" :required="boole">
            <text class="expectEndTime" />
            <uni-datetime-picker v-if="boole" type="date" placeholder="请选择预计更换轮胎结束时间" return-type="string"
                                 :start="ruleForm.expectStartTime"
              v-model="ruleForm.expectEndTime" />
            <text v-else> {{ ruleForm.expectEndTime || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="签约保养厂/保养厂:" name="maintenanceShopId" :required="boole">
            <text class="maintenanceShopId" />
            <zxz-uni-data-select v-if="boole" v-model="ruleForm.maintenanceShopId" :localdata="options"
                                 @change="handleMaintain"
              dataKey="supplierName" dataValue="supplierId" placeholder="请输入签约保养厂/保养厂" :clear="true" filterable />
            <text v-else>{{ ruleForm.maintenanceShop || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="故障现象:" name="faultPhenomenon" :required="boole">
            <text class="faultPhenomenon" />
            <uni-easyinput v-if="boole" v-model="ruleForm.faultPhenomenon" placeholder="请输入故障现象" />
            <text v-else> {{ ruleForm.faultPhenomenon || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="维修厂故障诊断:" name="maintenanceFaultDiagnosis" :required="boole">
            <text class="maintenanceFaultDiagnosis" />
            <uni-data-select v-if="boole" v-model="ruleForm.maintenanceFaultDiagnosis" :localdata="range"
              placeholder="请选择维修厂故障诊断" :clear="true" filterable />
            <text v-else> {{
                ruleForm.maintenanceFaultDiagnosis == '1' ? '是' : ruleForm.maintenanceFaultDiagnosis == '2' ? '否' : ''
              }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="维修厂报价:" name="maintenanceQuoter" :required="boole">
            <text class="maintenanceQuoter" />
            <uni-easyinput v-if="boole" v-model="ruleForm.maintenanceQuoter"
              disabled placeholder="请输入维修厂报价" />
            <text v-else> {{ ruleForm.maintenanceQuoter || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="是否符合索赔理由:" name="reasonForClaim" :required="boole">
            <text class="reasonForClaim" />
            <uni-data-select v-if="boole" v-model="ruleForm.reasonForClaim" :localdata="range" placeholder="请选择是否符合索赔理由"
              :clear="true" filterable />
            <text v-else> {{
                ruleForm.reasonForClaim == '1' ? '是' : ruleForm.reasonForClaim == '2' ? '否' : ''
              }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="是否有同车型(处置车辆)对换配件:">
            <text class="swappingAccessories" />
            <uni-data-select v-if="boole" v-model="ruleForm.swappingAccessories" :localdata="range"
              placeholder="请选择是否有同车型(处置车辆)对换配件" :clear="true" filterable />
            <text v-else> {{
                ruleForm.swappingAccessories == '1' ? '是' : ruleForm.swappingAccessories == '2' ? '否' : ''
              }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="不符合索赔理由:" name="claimantReason" v-if="ruleForm.reasonForClaim == '2'">
            <text class="maintenanceQuoter" />
            <uni-easyinput v-if="boole" v-model="ruleForm.claimantReason" placeholder="请输入不符合索赔理由" />
            <text v-else> {{ ruleForm.claimantReason || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="综合建议方案:" name="comprehensiveRecommendations" :required="boole">
            <uni-easyinput type="textarea" v-if="boole" :maxlength="490"
                           v-model="ruleForm.comprehensiveRecommendations"
              placeholder="请输入综合建议方案" />
            <text v-else>{{ ruleForm.comprehensiveRecommendations || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="备注:">
            <uni-easyinput type="textarea" v-if="boole" :maxlength="490"
                           v-model="ruleForm.normalRemark" placeholder="输入备注" />
            <text v-else>{{ ruleForm.normalRemark || '-' }}</text>
          </uni-forms-item>

        </uni-forms>
      </view>
    </view>
  </view>
</template>

<script>
import { getInsuranceSelectList } from "@/api/maintain/maintainList";

export default {
  name: "changeTireInfo", //更换轮胎信息
  props: {
    value: {
      type: Object,
      default: {},
    },
    boole: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    handleLabel() {
      return function (arr, type) {
        let name = "";
        arr.map((v) => {
          if (type == v.value) {
            name = v.label;
          }
        });
        return name;
      };
    },
  },
  watch: {},
  data() {
    return {
      options: [],
      range: [
        { value: "1", text: "是" },
        { value: "2", text: "否" },
      ],
      rules: {
        expectStartTime: {
          rules: [
            {
              required: true,
              errorMessage: "请选择预计更换轮胎开始时间",
              validateTrigger: "bind",
            },
          ],
        },
        expectEndTime: {
          rules: [
            {
              required: true,
              errorMessage: "请选择预计更换轮胎结束时间",
              validateTrigger: "bind",
            },
          ],
        },
        maintenanceShopId: {
          rules: [
            {
              required: true,
              errorMessage: "请输入签约保养厂/保养厂",
              validateTrigger: "blur",
            },
          ],
        },
        faultPhenomenon: {
          rules: [
            {
              required: true,
              errorMessage: "请输入故障现象",
              validateTrigger: "blur",
            },
          ],
        },
        maintenanceQuoter: {
          rules: [
            {
              required: true,
              errorMessage: "请输入维修厂报价",
              validateTrigger: "blur",
            },
          ],
        },
        reasonForClaim: {
          rules: [
            {
              required: true,
              errorMessage: "请选择是否符合索赔理由",
              validateTrigger: "bind",
            },
          ],
        },
        comprehensiveRecommendations: {
          rules: [
            {
              required: true,
              errorMessage: "请输入综合建议方案",
              validateTrigger: "change",
            },
          ],
        },
        maintenanceFaultDiagnosis: {
          rules: [
            {
              required: true,
              errorMessage: "请选择维修厂故障诊断",
              validateTrigger: "bind",
            },
          ],
        },
      },
    };
  },
  created() {},
  mounted() {
    this.handleCount()
    this.handleList();
  },
  methods: {
    handleMaintain(val) {
      this.value.maintenanceShopId = this.ruleForm.maintenanceShopId = val.supplierId
      this.value.maintenanceShop = this.ruleForm.maintenanceShop = val.supplierName
    },

    handleList() {
      getInsuranceSelectList({ businessTypeCode: "4" }).then((res) => {
        if (res.code === 200) {
          this.options = res.data;
        }
      });
    },

    handleCount() {
      let num = this.ruleForm.unitPrice * this.ruleForm.tyreNum || 0
      this.$set(this.value, 'maintenanceQuoter', num?.toString().match(/^\d+(?:\.\d{0,2})?/)[0])
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm
          .validate()
          .then((res) => {
            resolve();
          })
          .catch((err) => {
            let key = ".flex-col" + ">>>" + "." + err[0].key;
            reject(key);
          });
      });
    },
  },
};
</script>

<style scoped lang=""></style>


